<template>
	<view class="page-body" style="background-image: linear-gradient(to bottom, #ff8200 0%, #F7F7F7 40%);">
		<view class="sensitize-cz">
			<view class="secsitize-nr">
				<image src="/static/img/Home/qiehuan2.png" class="imageisi"></image>
				<view>充值订单记录</view>
			</view>
			<image src="/static/img/Home/kaitongvip.png" class="kaitongvip">
				<view class="kaitongvip-nr">
					<view class="kai-bt">芒播生活</view>
					<view class="kai-xiat">暂未开通</view>
				</view>
			</image>
		</view>
		<view class="ofmoney display-flex">
			<view class="ofmoney-1" :class=" indexi == item.id ? 'backger' : '' " v-for="(item,index) in listData"
				:key="index" @click="ofmoney(index)">
				<view class="ofmoney-bt">{{ item.text }}</view>
				<view class="continuous">{{ item.baozhou }}</view>
				<view class="price"><text style="font-size: 33rpx;">￥</text>{{ item.price }}</view>
				<view class="original">¥{{ item.pricei }}</view>
				<image 
					v-show="indexi == item.id " 
					class="ofmoney-img" 
					width="60rpx" 
					height="60rpx" 
					mode="aspectFit"  
					src="/static/img/Home/xuanzhong.png"></image>
			</view>
		</view>
		<view class="display-flex payment">
			<view class="payment-1" :class=" indexs == item.id ? 'bor' : '' " v-for="(item,index) in indexdata"
				:key="item.id" @click="payment(index)">
				<image :src="item.src"></image>
				<text>{{ item.text }}</text>
			</view>
		</view>
		<view class="dibu-but" @click="sumbit">立即开通</view>
		<view class="dibu-tk">
			<u-checkbox-group @change="checkboxGroupChange"  >
				<u-checkbox @change="checkboxChange" v-model="item.checked" shape="circle" active-color="#FF8204"
					><text class="bibu-1">开通前请阅读《会员服务协议》(含自动续费条款)</text></u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [{
						text: '价格更低',
						baozhou: '连续包周VIP',
						price: '6.9',
						pricei: '10',
						id: 0
					},
					{
						text: '每月省10元',
						baozhou: '连续包周VIP',
						price: '6.9',
						pricei: '10',
						id: 1
					},
					{
						text: '价格更低',
						baozhou: '连续包周VIP',
						price: '6.9',
						pricei: '10',
						id: 2
					}
				],
				indexi: 0,
				indexs: 0,
				poli: false,
				is_agreement: false,
				item: {
					name: '',
					checked: false
				},
				indexdata: [{
						text: '支付宝',
						id: 0,
						src: '/static/public/images/pay/alipay.png'
					},
					{
						text: '微信',
						id: 1,
						src: '/static/public/images/pay/weixin.png'
					},
					{
						text: '余额',
						id: 2,
						src: '/static/public/images/pay/balance.png'
					}
				]
			}
		},
		methods: {
			ofmoney(index) {
				this.indexi = index
			},
			payment(index) {
				this.indexs = index
			},
			checkboxGroupChange(e) {

			},
			checkboxChange(e) {
				console.log(e);
				e.value = true
			},
			// 立即开通会员，这里应该是请求成功后再跳转,
			// @todo 接口还没写
			sumbit() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			}
		}
	}
</script>

<style lang="scss">
	.backger {
		background: rgba(253, 130, 37, 0.2);

	}

	.bor {
		background: rgba(253, 130, 37, 0.2);
		border: 2px solid #FA8234 !important;
		color: #FD8225;
	}

	.display-flex {
		display: flex;
		justify-content: space-around;
	}

	.sensitize-cz {
		width: 686rpx;
		height: 206rpx;
		margin: 0 auto;
		position: relative;
		top: 70rpx;
		margin-bottom: 140rpx;

		.secsitize-nr {
			width: 250rpx;
			height: 65rpx;
			background-color: #fff;
			position: absolute;
			top: 6rpx;
			right: 0;
			border-top-right-radius: 20rpx;
			display: flex;
			flex-flow: row-reverse;
			font-weight: bold;
			font-size: 26rpx;
			padding-top: 10rpx;
			padding-right: 20rpx;

			.imageisi {
				width: 34rpx;
				height: 26rpx;
				margin-top: 6rpx;
			}
		}

		.kaitongvip {
			position: absolute;
			top: 0;
			left: 0;
			width: 686rpx;
			height: 206rpx;

		}

		.kaitongvip-nr {
			position: absolute;
			color: #fff;
			top: 35rpx;
			left: 40rpx;

			.kai-bt {
				font-weight: bold;
				font-size: 45rpx;
				margin-bottom: 20rpx;
			}

			.kai-xiat {
				font-weight: 400;
				font-size: 26rpx;
			}
		}
	}

	.ofmoney {
		width: 686rpx;
		height: 280rpx;
		margin: 0 auto;

		.ofmoney-1 {
			width: 208rpx;
			height: 279rpx;
			border: 2rpx solid #FD8225;
			border-radius: 8rpx;

			padding-top: 17rpx;
			position: relative;

			.ofmoney-bt {
				height: 36rpx;
				display: inline-block;
				position: absolute;
				right: -2rpx;
				background-image: linear-gradient(to right, #ff8200, #dc9f2e, #babb5c, #97d88a);
				border-radius: 15rpx 0rpx 0rpx 15rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: right;
				line-height: 36rpx;
				padding-left: 10rpx;
			}

			.continuous {
				font-weight: 600;
				font-size: 26rpx;
				color: #FD8225;
				text-align: center;
				margin: 63rpx 0 25rpx 0;
			}

			.price {
				font-weight: 600;
				font-size: 53rpx;
				color: #FD8225;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.original {
				font-weight: 400;
				font-size: 19rpx;
				color: #999999;
				text-align: center;
				text-decoration: line-through;
			}

			.ofmoney-img {
				position: absolute;
				right: -14rpx;
				bottom: -20rpx;
				width: 100rpx;
				height: 100rpx;

			}
		}
	}

	.payment {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 38rpx;

		.payment-1 {
			width: 208rpx;
			height: 84rpx;

			border-radius: 8rpx;
			border: 2px solid #999999;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 17rpx;
			}
		}
	}

	.dibu-but {
		width: 694rpx;
		height: 90rpx;
		border-radius: 45rpx;
		background-image: linear-gradient(to right, #ff8200, #dc9f2e, #babb5c, #97d88a);
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		margin: 0 auto;
		margin-top: 74rpx;
	}
	.dibu-tk{
		width: 580rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		.bibu-1{
			font-weight: 400;
			font-size: 24rpx;
			color: #000;
		}
		
	}
</style>